
import React from 'react'
import { MoreOutlined } from '@ant-design/icons'
import { ICapabilityHook } from "../../interfaces/ICapability"
import { Button, Dropdown, Space } from 'antd';

export interface ICapabilityMenuProps<T> {

    /** 核心数据 */
    record?: T;

    /** 显示的按钮数 */
    column?: number;

    /** 索引 */
    index?: number;

    /** 功能列表 */
    useCapabilityList: ICapabilityHook[];
}

export function CapabilityMenu<T = any>(props: ICapabilityMenuProps<T>) {

    const { column = 1 } = props;

    const capabilityList = props.useCapabilityList
        .map(capability => capability(props.record, props.index))
        .filter(e => e.hide !== true)

    const buttonList = React.useMemo(() => capabilityList.slice(0, column), [capabilityList, column]);

    const dropdownList = React.useMemo(() => capabilityList.slice(column), [capabilityList, column]);

    const items = React.useMemo(() => {
        return dropdownList
            .map(capability => {
                return {
                    key: capability.id,
                    label: capability.title,
                    onClick: capability.onStart,
                    disabled: capability.disabled,
                }
            })
    }, [dropdownList])

    return (
        <Space>
            {capabilityList.map(e => e.element)}
            {buttonList.map(capability => {
                return (
                    <Button
                        type='link'
                        style={{ padding: 0 }}
                        loading={!!capability.loading}
                        disabled={!!capability.disabled}
                        onClick={capability.onStart}
                    >
                        {capability.title}
                    </Button>
                )
            })}
            {
                // items.length > 0 &&
                <Dropdown
                    menu={{ items }}
                    placement='bottomRight'
                >
                    <Button
                        type='link'
                        icon={<MoreOutlined />}
                        style={{ padding: 0, visibility: items.length > 0 ? 'visible' : 'hidden' }}
                    />
                </Dropdown>
            }
        </Space>
    )
}